<template>
  <div>

    <div class="countdown my-flex">
      <!-- 不限制考试时间 -->
      <div v-show="exerciseTimeStatus === 1" class="countdownSubtitle my-flex flex-y-center">
        <img class="clockIcon" :src="require('@/assets/linux/clock_icon.png')" alt="">
        <p>{{ tipTextEnd }}</p>
      </div>

      <!-- 不限制考试时间 -->
      <div v-show="exerciseTimeStatus === 1" class="countdownDetail my-flex flex-y-center">
        <p>不限制</p>
      </div>

      <!-- 限制时间 -->
      <div v-show="exerciseTimeStatus === 2" class="countdownSubtitle my-flex flex-y-center">
        <img class="clockIcon" :src="require('@/assets/linux/clock_icon.png')" alt="">
        <p v-if="tipShow">{{ tipText }}</p>
        <p v-if="!tipShow">{{ tipTextEnd }}</p>
      </div>

      <!-- 限制时间 -->
      <div v-show="exerciseTimeStatus === 2" class="countdownDetail my-flex flex-y-center">

        <div v-if="msTime.show" class="my-flex flex-y-center">
          <div class="time my-flex flex-x-center flex-y-center">{{ msTime.hour }}</div>
          <p class="symbols">{{ hourTxt }}</p>
          <div class="time my-flex flex-x-center flex-y-center">{{ msTime.minutes }}</div>
          <p class="symbols">{{ minutesTxt }}</p>
          <div class="time my-flex flex-x-center flex-y-center">{{ msTime.seconds }}</div>
        </div>
        <p v-if="!msTime.show">{{ endText }}</p>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  replace: true,
  props: {
    exerciseTimeStatus: {
      type: Number,
      require: true,
      default: 0
    },
    // 距离开始提示文字
    tipText: {
      type: String,
      default: '距离开考倒记时'
    },
    // 距离结束提示文字
    tipTextEnd: {
      type: String,
      default: '考试结束倒计时'
    },
    // 时间控件ID
    id: {
      type: String,
      default: '1'
    },
    // 当前时间
    currentTime: {
      type: Number,
      require: true,
      default: 0
    },
    // 活动开始时间
    startTime: {
      type: Number,
      require: true,
      default: 0
    },
    // 活动结束时间
    endTime: {
      type: Number,
      require: true,
      default: 0
    },
    // 倒计时结束显示文本
    endText: {
      type: String,
      default: '考试已结束'
    },
    // 自定义显示文字:天
    dayTxt: {
      type: String,
      default: ':'
    },
    // 自定义显示文字:时
    hourTxt: {
      type: String,
      default: ':'
    },
    // 自定义显示文字:分
    minutesTxt: {
      type: String,
      default: ':'
    },
    secondsTxt: {
      type: String,
      default: ':'
    },
    // 是否开启秒表倒计，未完成
    secondsFixed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tipShow: true,
      msTime: {			// 倒计时数值
        show: false,		// 倒计时状态
        day: '',			// 天
        hour: '',		// 小时
        minutes: '',		// 分钟
        seconds: ''		// 秒
      },
      star: '',			// 活动开始时间
      end: '',				// 活动结束时间
      current: '' // 当前时间
    }
  },
  watch: {
    currentTime: function(val, oldval) {
      this.gogogo()
    }
  },
  mounted() {
    // this.gogogo()
  },
  // 销毁函数
  destroyed() {
    // 清除倒计时
    clearTimeout(this.timer) // 清除
  },
  methods: {
    gogogo: function() {
      clearTimeout(this.timer)
      // 判断是秒还是毫秒
      this.startTime.toString().length === 10 ? this.star = this.startTime * 1000 : this.star = this.startTime
      this.endTime.toString().length === 10 ? this.end = this.endTime * 1000 : this.end = this.endTime
      if (this.currentTime) {
        this.currentTime.toString().length === 10 ? this.current = this.currentTime * 1000 : this.current = this.currentTime
      } else {
        this.current = (new Date()).getTime()
      }

      if (this.end < this.current) {
        // console.log('this.end < this.current')
        /**
           * 结束时间小于当前时间 活动已结束
           */
        this.msTime.show = false
        this.end_message()
      } else if (this.current < this.star) {
        // console.log('当前时间小于开始时间 活动尚未开始')
        /**
           * 当前时间小于开始时间 活动尚未开始
           */
        this.$set(this, 'tipShow', true)
        setTimeout(() => {
          this.runTime(this.star, this.current, this.start_message)
        }, 1)
      } else if (this.end > this.current && this.star < this.current || this.star === this.current) {
        // console.log('结束时间大于当前并且开始时间小于当前时间，执行活动开始倒计时')

        /**
           * 结束时间大于当前并且开始时间小于当前时间，执行活动开始倒计时
           */
        this.$set(this, 'tipShow', false)
        this.msTime.show = true
        this.$emit('startCallback', this.msTime.show)
        setTimeout(() => {
          this.runTime(this.end, this.current, this.end_message, true)
        }, 1)
      }
    },
    runTime(startTime, endTime, callFun, type) {
      const msTime = this.msTime
      let timeDistance = startTime - endTime

      // console.log(timeDistance)
      if (timeDistance > 0) {
        this.msTime.show = true
        msTime.day = Math.floor(timeDistance / 86400000)
        timeDistance -= msTime.day * 86400000
        msTime.hour = Math.floor(timeDistance / 3600000)
        timeDistance -= msTime.hour * 3600000
        msTime.minutes = Math.floor(timeDistance / 60000)
        timeDistance -= msTime.minutes * 60000
        // 是否开启秒表倒计,未完成
        //                    this.secondsFixed ? msTime.seconds = new Number(timeDistance / 1000).toFixed(2) : msTime.seconds = Math.floor( timeDistance / 1000 ).toFixed(0);
        msTime.seconds = Math.floor(timeDistance / 1000).toFixed(0)
        timeDistance -= msTime.seconds * 1000

        if (msTime.hour < 10) {
          msTime.hour = '0' + msTime.hour
        }
        if (msTime.minutes < 10) {
          msTime.minutes = '0' + msTime.minutes
        }
        if (msTime.seconds < 10) {
          msTime.seconds = '0' + msTime.seconds
        }
        const _s = Date.now()
        const _e = Date.now()
        const diffPerFunc = _e - _s
        this.timer = setTimeout(() => {
          if (type) {
            this.runTime(this.end, endTime += 1000, callFun, true)
          } else {
            this.runTime(this.star, endTime += 1000, callFun)
          }
        }, 1000 - diffPerFunc)
      } else {
        // console.log('时间结束')
        callFun()
      }
    },
    // 开始回调
    start_message() {
      this.$set(this, 'tipShow', false)
      this.$emit('startCallback', this.msTime.show)
      setTimeout(() => {
        this.runTime(this.end, this.star, this.end_message, true)
      }, 1)
    },
    // 结束回调
    end_message() {
      this.msTime.show = false
      if (this.currentTime <= 0) {
        return
      }
      const msTime = this.msTime
      msTime.seconds = '00'
      this.$emit('endCallback', this.msTime.show)
    }
  }
}
</script>

<style lang="scss" scoped>

    .countdown {

      &Subtitle {
        @include FifthFont(#2C2C2C,500);
        .clockIcon {
          width: 14px;
          height: 14px;
          margin-right: 10px;
        }
      }

      &Detail {
        margin-left: 20px;
        @include FifthFont($MainColor,500);
        .time {
          width: 20px;
          height: 20px;
          background-color: #fff;
        }
        .symbols {
          margin: 0 6px;
        }
      }
    }
</style>
